Farben im User Experience und User Interface Design

Farben spielen eine wichtige Rolle im UX/UI-Design: Welche Bedeutung sie genau im Design von Benutzeroberflächen haben und wie wir bei Cap3 Farben für Projekte auswählen und anlegen, wollen wir euch heute anhand eines aktuellen Projektes (BeachNow) näher erklären.

Zum Projekt: BeachNow bringt die Digitalisierung an den Strand. Das innovative Buchungssystem für Strandkörbe ermöglicht den Strandbesuchern bereits bei der Planung des Urlaubs oder spontan vor Ort einen Strandkorb über die App oder Website zu buchen.

Markenfarben

Für den Anfang schauen wir uns dafür die Markenfarben, welche die CI (Corporate Identity) des Produkts ausmachen, näher an. Die primäre Farbe (bei uns auch „Primary“ genannt), welche sich in vielen Elementen in der App befindet, ist in diesem Beispiel ein Blauton. Die sekundäre („Secondary“) Farbe ist hier ein Gelbton. Dieser Ton wird hauptsächlich im Logo oder bei Grafiken verwendet.

Die Markenfarben wurden in Anlehnung an das Strandthema von BeachNow gewählt und repräsentieren die Sonne und das Meer, welche auch das Logo des Produktes bilden. Durch das Hinzufügen dieser beiden Farben bekommen die Screens mehr Tiefe, das Logo hebt sich ab und wird als solches erkannt, der Button wird präsenter und Links in Textform können nun erkannt werden.

Farben zur Übersichtlichkeit

Außerdem gibt es weitere CI-Farben, welche wiederum der Übersichtlichkeit dienen. Die Farbtöne leiten sich von der primären und sekundären Farbe ab, um ein stimmiges Gesamtbild und eine gute Farbharmonie zu erzeugen. Diese Gelb- und Beigetöne werden vor allem für die Strandkarten verwendet.

Grautöne

Als nächstes betrachten wir die Grautöne, welche in dunkleren Abstufungen für die Schrift verwendet werden. Die helleren Grautöne werden dahingegen für Schatten oder auch für nicht verfügbare Funktionen wie einen nicht klickbaren Button (Disabled-Button) benutzt. Wichtig bei diesen Tönen ist es, dass ein klares Kontrastverhältnis zwischen den helleren und dunkleren Farben vorhanden ist, damit alles gut erkenn- und lesbar ist. Die Verwendung unterschiedlicher Grautöne verleiht den Screens mehr Struktur und schafft eine klare Hierarchie zwischen den Elementen, wie unser Beispiel deutlich zeigt.

Systemfarben

Zuletzt stellen wir euch die Systemfarben vor. Diese Farben sollen den Nutzer auf etwas aufmerksam machen, zum Beispiel auf einen Fehler-Zustand. Hierbei unterscheiden wir zwischen einer „Warning“-Farbe, „Success“-Farbe und „Error“-Farbe. Dabei wurde sich an die kulturellen Konventionen gehalten und ein Rotton für Fehlermeldungen, ein Gelbton für Warnungen und ein Grünton für Erfolg verwendet. Bei allen drei Systemfarben ist es wichtig, dass diese sich untereinander und von der Primärfarbe (Markenfarbe, hier blau) unterscheiden. Weiterhin sollte bei der Unterscheidbarkeit der Systemfarben (Rot und Grün) darauf geachtet werden, dass die Barrierefreiheit eingehalten wird, da ein Teil der Menschheit an einer Rot-Grün-Sehschwäche leidet. Hierfür gibt es verschiedene Hilfsmittel, welche Sehschwächen durch Änderungen der Farben am Bildschirm simulieren können. Falls dabei auffällt, dass sich Rot- und Grüntöne zu stark ähneln, können diese Farben noch einmal angepasst werden.

Die Signalfarben dienen nicht nur zur Darstellung von Fehler- oder Erfolgsmeldungen, sondern in diesem Beispiel auch der Mitteilung von Informationen. Hier werden die Signalfarben dafür verwendet, um den Nutzer über die Strandkorbbelegung oder Verfügbarkeit zu informieren.

Wie ihr bei den Beispielen sehen konntet, sind Farben ein entscheidender Faktor im UX/UI-Design, damit eine positive Benutzererfahrung entsteht und die Bedienbarkeit der Anwendung erleichtert wird. Sie sind aufeinander abgestimmt und gewährleisten somit ein harmonisches Gesamtbild. Zusätzlich wird durch die kleine Farbpalette eine bessere Übersichtlichkeit erreicht.